<template>
  <view>
    <view class="yaoqing-titlebox">
      <view class="yaoqing-title">邀请好友立享多重奖励</view>
      <view class="">每成功邀请一名好友注册</view>
      <view class="">可获得 20 VTN,好友邀请可再获得 10 VTN</view>
    </view>
    <!-- 邀请码盒子开始 -->
    <view class="yaoqing-code">
      <view class="yaoqing-top">
        <view class="">您的专属邀请码</view>
        <text class="yao-code">fsfdsfdsfd</text>
      </view>
      <view class="yaoqing-bottom">
        <view class="copy-btn">复制</view>
        <view class="mianduimian" @click="show=true">面对面邀请</view>
      </view>
    </view>
    <!-- 邀请码盒子结束 -->
    <button type="primary">发送邀请</button>
    <view class="wode-title">我的邀请</view>
    <view class="wode-box">
      <view class="chenggong">
        <view class="">
          <text class="count-text">0</text>
          <view class="">成功邀请(人)</view>
        </view>
        <view class="">
          <text class="count-text">0</text>
          <view class="">奖励VTN</view>
        </view>
      </view>
      <view class="leiji-text">
        <text>累计邀请实盘用户数</text>
        <text>0</text>
      </view>
      <u-button type="primary" shape="circle" size="medium">开通合伙人</u-button>
    </view>
    <view class="xiwang-text">
      <view class="">希望获得额外的邀请奖励吗?</view>
      <view class="guize">了解合伙人规则>></view>
    </view>
    <view class="yaoqing-titlebox">邀请记录</view>
    <view class="jilv-title">
      <text>好友账号</text>
      <text>邀请时间</text>
      <text>奖励VTN</text>
    </view>
    <view class="bottom-text">
      Vtrading拥有活动的一切解释权，虚假邀请行为会被取消奖励
    </view>
    <u-popup v-model="show" mode="center" border-radius="20" :closeable="true" close-icon-color="#FFFFFF">
      <view class="yaoqingbox">
        <view class="yaoqingbox-title">面对面邀请</view>
        <view class="yaoqingbox-img">
          <image src="../../static/qrcode.png" mode=""></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false //面对面邀请弹出层
      }
    },
    methods: {

    }
  }
</script>

<style>
  page {
    background-color: #091434;
    color: #FFFFFF;
    padding: 40rpx;
  }

  .yaoqing-titlebox {
    text-align: center;
  }

  .yaoqing-title {
    font-size: 48rpx;
    margin-bottom: 60rpx;
  }

  .yaoqing-code {
    height: 500rpx;
    background-color: #121d3b;
    margin: 50rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .yaoqing-top {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 250rpx;
    border-bottom: 1rpx dashed #d9d9d9;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 32rpx
  }

  .yao-code {
    padding: 20rpx 60rpx;
    background-color: red;
    background-image: linear-gradient(to right, #4ac0f6, #5a92f9, #6b62f8, #793cef);
  }

  .yaoqing-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 250rpx;
    background-color: #FFFFFF;
    color: #007AFF;
  }

  .copy-btn {
    border: 1rpx solid #007AFF;
    border-radius: 10rpx;
    padding: 8rpx 30rpx;
  }

  .mianduimian {
    border: 1rpx solid #007AFF;
    padding: 16rpx 30rpx;
    border-radius: 10rpx;
    background-color: #c8d6f0;
    margin-bottom: 20rpx;
  }

  .wode-title {
    margin: 60rpx 0 30rpx;
    text-align: center;
  }

  .wode-box {
    height: 400rpx;
    background-color: #121d3d;
    padding: 0 40rpx;
    text-align: center;
  }

  .chenggong {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 150rpx;
    font-size: 24rpx;
    color: #9ca7c5;
    margin-bottom: 30rpx;
  }

  .count-text {
    font-size: 38rpx;
    color: #FFFFFF;
  }

  .leiji-text {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin-bottom: 60rpx;
  }

  .xiwang-text {
    font-size: 24rpx;
    text-align: center;
    margin: 10rpx 0 60rpx;
  }

  .guize {
    color: #007AFF;
    margin-top: 8rpx;
  }

  .jilv-title {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 20rpx;
    background-color: #121d39;
    margin: 20rpx 0;
  }

  .bottom-text {
    font-size: 24rpx;
    color: #bbc1d9;
    text-align: center;
    margin: 60rpx 0;
  }
  .yaoqingbox{
    width: 600rpx;
    height: 700rpx;
    background-image: linear-gradient(#3d92fd,#3972f3,#324deb);
    border-radius: 20rpx;
    text-align: center;
  }
  .yaoqingbox-title{
    font-size: 48rpx;
    color: #FFFFFF;
    text-align: center;
    padding: 60rpx 0;
  }
  .yaoqingbox-img{
    width: 260rpx;
    height: 260rpx;
    margin: 80rpx 170rpx;
    
  }
  .yaoqingbox-img image{
    width: 100%;
    height: 100%;
  }
</style>
